<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /*加载背景图：图片地址 不平铺 */
            background:url("/imgs/login/beijing.png");
            /* 让背景图基于容器大小伸缩 */
            background-size: 100% 100%;
            background-attachment: fixed;

        }
        /*html,body{height:100%}*/

        /*html,body{height:100%}*/
        .login-box{width:100%;max-width:500px;height:300px;position:absolute;top:50%;margin-top:-200px}
        @media screen and (min-width:500px)
        {
            .login-box{left:50%;margin-left:-250px}
        .form{width:100%;max-width:500px;height:275px;margin:2px auto 0px auto}
        .login-content{border-bottom-left-radius:8px;border-bottom-right-radius:8px;height:250px;width:100%;max-width:500px;background-color:rgba(255,250,2550,.5);float:left}
        .input-group{margin:30px 0px 0px 0px !important}
        .form-control,.input-group{height:40px}
        .form-actions{margin-top:30px}
        .form-group{margin-bottom:0px !important}
        .login-title{border-top-left-radius:8px;border-top-right-radius:8px;padding:20px 10px;background-color:rgba(0,0,0,.1)}
        .login-title h1{margin-top:10px !important}
        .login-title small{color:#fff}
        .link p{line-height:20px;margin-top:30px}
        .btn-sm{padding:8px 24px !important;font-size:16px !important}
        .flag{position:absolute;top:10px;right:10px;color:#fff;font-weight:bold;font:14px/normal "microsoft yahei","Times New Roman","宋体",Times,serif}
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-box">
        <div class="login-title text-center">
            <span class="flag">  用户登陆</span>
            <h1><small>旅游乐后台管理系统</small></h1>
        </div>
        <div class="login-content ">
            <div class="form">
                <el-form :model="loginInfo" status-icon :rules="rules" ref="loginInfo" label-width="60px"
                         class="demo-loginInfo">
                    <el-form-item prop="userName" >
                        <span slot="label">
      	                    <span style="color: white"><strong>账号</strong>      </span>
                        </span>
                        <el-input type="text" v-model="loginInfo.userName" class="form-control" placeholder="请输入账号">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <span slot="label">
      	                    <span style="color: white"><strong>密码</strong>      </span>
                        </span>
                        <el-input type="password" v-model="loginInfo.password" class="form-control" placeholder="请输入密码">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="submit" class="btn btn-danger btn-block" @click="submitForm('loginInfo')">登录
                        </el-button>
                        <el-button type="submit" class="btn btn-danger btn-block" @click="reset">重置
                        </el-button>
                        <!--<a href="" type="button" class="btn btn-danger" style="width: 350px;margin-top: 5px">注册</a>-->
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            loginInfo: {
                userName:'admin',
                password:'123456'
            },

            rules: {
                userName: [{
                    required: true,
                    message: '请输入账号',
                    trigger: 'blur'
                },
                    {
                        min: 5,
                        max: 16,
                        message: '长度在 5 到 16 个字符',
                        trigger: 'blur'
                    }
                ],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                },
                    {
                        min: 3,
                        max: 16,
                        message: '长度在 3 到 16 个字符',
                        trigger: 'blur'
                    }
                ],

            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //发送ajax请求到后台
                        /*$.post("/user/login", {"username":this.loginInfo.username,"password":this.loginInfo.password},
                                function(backDate) {
                            if (backDate.code === 200) {
                                window.location.href = "index.html"
                            } else {
                                app.$message.error('用户名或者密码错误！');
                                 //app.msg="用户名或者密码错误！";
                            }
                        })*/

                        //在使用axios发生请求之前，定义变量_this=this，代指Vue对象
                        var _this = this;
                        //使用axios向后台发请求
                        axios.post("/user/login", //请求的url
                            this.loginInfo) //请求参数 json格式    因为this.form = row;  此时deptNo参数也传到后端
                            .then(function (response) {//回调函数
                                //前端控制台打印   response 是json对象
                                console.log(response);
                                // JSON.stringify() 把json对象转为字符串
                                console.log(JSON.stringify(response));
                                //response获取后台数据时，一定要加data response.data相当于从响应的body中获取
                                if (response.data.code==200){
                                    window.location.href = "index.html"
                                }else {
                                    _this.$message.error('用户名或者密码错误！');
                                }
                            })
                            .catch(function (error) {//异常处理
                                console.log(error);
                            });
                    }
                });
            },
            reset(){
                this.loginInfo.userName='';
                this.loginInfo.password='';
            }
        }
    });
</script>

</body>
</html>
